<template>
  <!--
    编辑条款
  -->
  <el-dialog
    :visible="visible"
    :title="title"
    top="100px"
    width="600px"
    append-to-body
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form ref="clause" :model="form" :rules="clauseRules">
      <el-form-item prop="text">
        <el-input
          v-model="form.text"
          type="textarea"
          show-word-limit
          :maxlength="textMaxLength"
          :autosize="{minRows: 5, maxRows: 15}"
          placeholder="请输入条款内容"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogToggle(false)">取 消</el-button>
      <el-button type="primary" @click="validateClause">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ClauseEdit',
  props: {
    title: {type: String, default: ''},
    clause: {type: Object, default: () => ({})}
  },
  data() {
    return {
      visible: false,

      textMaxLength: 800,
      form: {
        text: ''
      }
    };
  },
  computed: {
    clauseRules() {
      return {
        text: [
          {required: true, message: '请输入条款内容', trigger: 'change'},
          {max: this.textMaxLength, message: `最多${this.textMaxLength}个字符`, trigger: 'change'}
        ]
      };
    }
  },
  watch: {
    clause(newVal, oldVal) {
      this.form = {...newVal};
    }
  },
  methods: {
    dialogToggle(visible) {
      this.visible = visible;
    },

    validateClause() {
      this.$refs.clause.validate(result => {
        if (result) {
          this.emitChange();
        }
      });
    },

    emitChange() {
      let data = {...this.form};
      this.$emit('change', data);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
